<template>
	<view class="mask" v-if="showMask" @click="$emit('dialog-close')">
		<view class="container">
		<!-- 	<view class="close-layout">
				<image class="result-close" :src="closeImgUrl" mode="widthFix"></image>
			</view> -->
			<image :src="imgUrl" mode="widthFix" class="mask-img"></image>
		</view>
	</view>
</template>

<script>
	import config from '@/config.js';
	export default {
		name: "maskLayer",
		data() {
			return {
				// closeImgUrl: config.imgUrl + 'buyCard/cancel.png',
			};
		},
		props: {
			imgUrl: {
				type: String,
				required: true
			},
			showMask: {
				type: Boolean,
				default: true
			}
		}
	}
</script>

<style lang="scss">
	.mask {
		z-index: 99;
		position: fixed;
		background-color: rgba(0, 0, 0, 0.3);
		width: 100%;
		height: 100vh;

		.container {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 100%;
			transform: translate(-50%, -75%);

			.close-layout {
				width: 100%;
				height: 60rpx;
				display: flex;
				justify-content: flex-end;
				align-items: flex-end;

				.result-close {
					width: 50rpx;
					margin-right: 10%;
				}
			}

			.mask-img {
				width: 70%;
				margin: 0 auto;
				display: block;
			}
		}


	}
</style>
